<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>写贴记录</title>
  <link rel="stylesheet" href="../static/lib/semantic/semantic.min.css" th:href="@{/lib/semantic/semantic.min.css}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
  <!--    <link href="../static/css/app.css" rel="stylesheet">-->
  <!--    <link href="../static/css/style.min.css" rel="stylesheet">-->
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../static/css/timeline.css" th:href="@{/css/timeline.css}">
</head>
<body class="archiveBody">

<!--导航-->
<nav class="gird-header">
  <div class="ui container" style="width: 95%!important;"> <!-- 加一个容器 -->
    <div class="ui inverted secondary stackable menu"> <!-- 菜单 stackable:可堆叠的,表示屏幕小时自动堆叠-->
      <a th:href="@{/user_index}"><h2 class="ui white header item">GuideSystem</h2></a> <!-- 蓝绿色标题 -->
      <a href="#" th:href="@{/user_index}" class="m-item m-mobile-hide item"><i class="home icon"></i>首页</a>
      <!-- icon表示图标 -->
      <a href="#" th:href="@{/user_forum}" class="m-item m-mobile-hide item"><i class="comments icon"></i>论坛</a>
      <a href="#" th:href="@{/user_types/-1}" class="m-item m-mobile-hide item"><i class="idea icon"></i>分类</a>
      <a href="#" th:href="@{/about}" class="m-item m-mobile-hide item"><i class="info icon"></i>我的</a>
      <div class="m-top-right m-mobile-hide item m-item" style="margin: auto; margin-top: -5px;"> <!-- 靠右 -->
        <form name="search" method="get" action="#" th:action="@{/user_search}" target="_blank">
          <div class="ui icon input">
            <input type="text" name="query" placeholder="Search..." th:value="${query}">
            <i onclick="document.forms['search'].submit()" class="search link icon"></i>
          </div>
        </form>
        <div class="ui dropdown item">
          <div class="container">
            <img src="../static/images/店铺1.jpg" th:src="@{${session.user?.avatar}}" alt="" class="ui avatar image"
                 style="object-fit: cover;
                       outline: 0px;
                       background-size: 100% 100%;">
          </div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <a href="#" th:href="@{/about}" target="_blank" class="item">我的</a>
            <a href="#" th:href="@{/edit/password}" class="item">修改密码</a>
            <a href="#" th:href="@{/login/exit}" id="logout-link" class="item">退出</a>
            <a href="#" onclick="deleteAccount()" class="item">注销</a> <!--得更新-->
          </div>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black button icon m-top-right m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<!--时间轴内容-->
<div class="doc-container m-opacity m-padded-tb-big" id="doc-container">
  <th:block>
    <section class="timeline">
      <ul>
        <li class="" th:each="blog : ${myBlogs}">
          <div>
            <time th:text="'更新于:' + ${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020/01/01</time>
            <div class="scientist" style="position: relative">
              <a href="#" th:href="@{/user_blog/{id}(id=${blog.id})}">
                <h3 class="state" style="text-align:center;font-size: 16px;color: #000;"
                    th:text="${blog.title}">文章标题</h3>
              </a>
              <span class="right floated action-links"
                    style="position: absolute; bottom: 0; right: 0; margin-right: 5px!important; margin-bottom: 3px!important;">
                <a href="#" th:onclick="deleteBlog([[${blog.id}]], [[${blog.forum.id}]])">删除</a>&nbsp;
                <a href="#" th:href="@{/fblog/edit/{id}(id=${blog.id})}">编辑</a></span>
            </div>
          </div>
        </li>
      </ul>
    </section>
  </th:block>
</div>

<div class="m-padded m-right-bottom m-fixed">
  <div class="ui vertical icon buttons">
    <a href="feedback.html" th:href="@{/feedback}" type="button" class="ui blue button">反馈</a>
    <a href="#" th:href="@{/fblog/input}" class="ui blue button">写贴</a>
    <button class="ui icon button"><i class="headphones icon"></i></button>
    <a id="toTop-button" class="ui button"><i class="chevron up icon"></i></a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../static/lib/timeline/timeline.js" th:src="@{/lib/timeline/timeline.js}"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"
        th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<script src="../static/js/perfect-scrollbar.min.js" th:src="@{/js/perfect-scrollbar.min.js}"></script>
<!--第一种多人物的看板娘，缓存慢-->
<!--<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>-->

<script>

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('#toTop-button').click(function () {
        $(window).scrollTo(0, 500);
    });

    async function deleteAccount() {
        if (false) {
            var searchParams = new URLSearchParams();
            searchParams.append("password", $("[name='password']").val());

            const response = await fetch("/dev/login/delete", {
                method: 'POST',
                redirect: 'follow', // 允许fetch跟随重定向
                body: searchParams
            });
            const data = await response.json();
            console.log(data)
            if (data.status === "error") {
                alert(data.message);
                window.location.href = data.redirectUrl;
            } else if (data.status === "success") {
                alert(data.message);
                // 重定向到指定URL
                window.location.href = data.redirectUrl;
            }
        }
    }

    async function deleteBlog(id, forumId) {
        if (window.confirm("确认要删除嘛？帖子相关的所有内容都将被删除")) {
            const url = '/dev/fblog/delete/' + id + '?forumId=' + forumId;
            // 发起GET请求
            await fetch(url, {
                method: 'POST',
                redirect: 'follow', // 允许fetch跟随重定向
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(response => {
                if (!response.ok) {
                    throw new Error('Failed to delete picture');
                }
                // 如果服务器返回了Location头部，可以手动处理重定向(...不懂...)
                const myLocation = response.headers.get('Location');
                // console.log(location);
                if (myLocation) {
                    window.location.href = myLocation;
                } else {
                    location.reload();
                }
            }).catch(error => console.error('Error:', error));
        }
    }

</script>

</body>
</html>